<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<style>
/* 进度条样式 */
#progressBar {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

#progress {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
}
</style>
</head>
<body>

<audio id="myAudio" src="your-audio-file.mp3"></audio>

<div id="progressBar">
  <div id="progress"></div>
</div>

<button onclick="playPause()">播放/暂停</button>

<script>
var audio = document.getElementById("myAudio");
var progressBar = document.getElementById("progress");

function playPause() {
  if (audio.paused) {
    audio.play();
    updateProgressBar();
  } else {
    audio.pause();
  }
}

function updateProgressBar() {
  var percentage = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = percentage + '%';
  if (!audio.paused) {
    requestAnimationFrame(updateProgressBar);
  }
}

audio.addEventListener('timeupdate', updateProgressBar);
</script>

</body>
</html>
